import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import insuredService from "@/modules/settlementOfClaim/insured.service";
import { Modal } from "ant-design-vue";
import { CloudUploadOutlined } from "@ant-design/icons-vue";
import ImportTable from "@/components/public/importTable/importTable";
import Add from "./popup/Add";
export default defineComponent({
  setup() {
    const state = reactive({
      toolbar: {
        left: ["refresh", "add", "delete", {
          el: () => <ImportTable v-slots={{
            btnIcon: () => <CloudUploadOutlined/>
          }} title="被保人导入" downloadLabel="被保人Excel" downloadUrl={""} uploadUrl={""}/>
        }],
        right: ["filter", "search"],
        add: {
          handler: () => {
            AddRef.value.open();
          }
        }
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: 'id',
          align: "center",
          width: "50px",
        },
        {
          title: "被保人姓名",
          dataIndex: "insurer_name",
          key: 'insurer_name',
          align: "center",
        },
        {
          title: "被保人身份证号",
          dataIndex: "insurer_idno",
          key: 'insurer_idno',
          align: "center",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          key: 'operation',
          align: "center",
          width: "120px",
        },
      ],
      loading: false,
      searchForm: {
        insured_name: {
          type: "input",
          label: "被保人姓名",
          attrs: { placeholder: "被保人姓名" },
        },
        insurer_idno: {
          type: "input",
          label: "被保人身份证号",
          attrs: { placeholder: "被保人身份证号" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
    } as any);
    // 服务
    const $service = new insuredService();
    // 表格节点
    const LTableRef = ref(null as any);
    // 添加弹窗节点
    const AddRef = ref(null as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (selectedRowKeys: any[], record: any[]) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    const deleteRow = (id: number) => { };
    return () => (
      <Page>
        <CardWithTitle title="理赔列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              loading={state.loading}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={{ selectedRowKeys: state.selectedRowKeys, fixed: true, preserveSelectedRowKeys: true, onChange: onSelectChange }}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          class="et-btn-danger"
                          size="small"
                          onClick={() => {
                            Modal.confirm({
                              title: '提示',
                              content: '确认删除?',
                              onOk: () => {
                                LTableRef.value.$deleteTableRows([record.role_id])
                              }
                            })
                          }}
                        >
                          删除
                        </a-button>
                      </div>
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <Add ref={AddRef} />
      </Page>
    );
  },
});